<template>
	<view class="user-info-content">
		<view v-for="(i,iIndex) in dataList" :key="iIndex" @click="itemClick(i)"
			:style="{margin:iIndex == 0 ||iIndex == 6 ?'12px 0px':'0px',borderRadius:iIndex == 0 ||iIndex == 6||iIndex == 7? '12px':iIndex == 1 ?'12px 12px 0px 0px':iIndex == 5?'0px 0px 12px 12px ':'0px'}"
			class="user-card">
			<u-row justify="space-between" class="info-item" :style="{
					padding:iIndex == 0 ? '11px 0px':'16px 0px',
					borderBottom:iIndex == 1 ||iIndex == 2 ||iIndex == 3||iIndex == 4?'1px solid #303030':'none' }">
				<u-row>{{i.title}}</u-row>
				<u-row>
					<u-avatar v-if="iIndex == 0" size="30" :src="i.icon"></u-avatar>
					<span :style="{color:i.isWarning ? '#FFD8BB':'#fff'}">

						{{i.fieId ?userInfo[i.fieId] || i.subTitle : i.subTitle}}</span>
					<u-icon style="margin-left: 8px;" name="arrow-right" color="#999" size="14"></u-icon>
				</u-row>
			</u-row>
		</view>
		<view class="bottom-btn" @click="logout()">
			<view class="sport-btn">退出账号</view>
		</view>
		<!-- 修改弹窗 -->
		<u-modal showCancelButton width="80vw" @confirm="confirmEdit('nickname')" @close="modelShow = false"
			:show="modelShow" closeOnClickOverlay :title="modelTitle" cancelColor="#999" confirmColor="#FFD8BB">
			<u--input type="number" style="width: 100%;" placeholder="请输入" border="surround"
				v-model="inputValue"></u--input>
		</u-modal>
		<!-- 选择器 -->
		<u-picker :show="pickerShow" keyName="label" @confirm="confirmSelect" @cancel="pickerShow = false"
			@close="pickerShow = false" :columns="columns"></u-picker>
		<!-- 日期选择器 -->
		<u-datetime-picker :show="dateTimeshow" v-model="inputValue" @confirm="confirmDate"
			@close="dateTimeshow = false" @cancel="dateTimeshow = false" mode="date"></u-datetime-picker>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex"
	import store from "../../../utils/store"
	import {
		parseTime
	} from "../../../utils/index.js"
	export default {
		data() {
			return {
				dateTimeshow: false,
				editItem: {},
				columns: [
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 0
					}]
				],
				pickerShow: false,
				modelTitle: '',
				inputValue: '',
				modelShow: false,
				dataList: [{
						"title": "你的头像",
						"icon": "",
						"subTitle": "",
					},
					{
						"title": "昵称",
						"fieId": "nickname",
						"subTitle": "张元英",
						event: 'editInfo'
					},
					{
						"title": "性别",
						"fieId": "xb",
						"subTitle": "女",
						event: 'editBySelect'
					},
					{
						"title": "出生日期",
						"fieId": "csrq",
						"subTitle": "1999-01-01",
						event: 'editDate'
					},
					{
						"title": "身高",
						"icon": "",
						"fieId": "sg",
						"subTitle": "170cm",
						event: 'editBySelect'
					},
					{
						"title": "体重",
						"fieId": "tz",
						"subTitle": "50kg",
						event: 'editBySelect'
					},
					{
						"title": "当前账号",
						"icon": "",
						"subTitle": "123564687953"
					},
					{
						"title": "注销账号",
						"icon": "",
						"subTitle": "注销后无法恢复，请谨慎操作",
						"isWarning": true
					}
				]
			}
		},
		props: ['pageConfig'],
		components: {},
		computed: {
			...mapGetters(["userInfo"]),
		},
		mounted() {
			this.loadData()
		},
		methods: {
			loadData() {},
			itemClick(item) {
				if (!item.event) return
				this.editItem = item
				this[item.event](item)
			},
			editBySelect(item) {
				this.modelTitle = `修改${item.title}`
				this.columns = [
					[]
				]
				switch (item.title) {
					case '身高':
						for (var i = 130; i < 190; i++) {
							this.columns[0].push({
								id: i,
								label: `${i}cm`
							})
						}
						break;
					case '体重':
						for (var i = 30; i < 100; i++) {
							this.columns[0].push({
								id: i,
								label: `${i}kg`
							})
						}
						break;

					default:
						this.columns = [
							[{
								label: '男',
								id: 1
							}, {
								label: '女',
								id: 0
							}]
						]
						break;
				}

				this.pickerShow = true
			},
			confirmSelect(e) {
				let info = this.userInfo ? JSON.parse(JSON.stringify(this.userInfo)) : {}
				if (this.editItem.fieId) {
					info[this.editItem.fieId] = e.value[0].label
				}
				this.$store.dispatch('user/setUserInfo', info)
				this.pickerShow = false
			},
			editDate() {
				this.inputValue = ''
				this.dateTimeshow = true
			},
			confirmDate(e) {
				let info = this.userInfo ? JSON.parse(JSON.stringify(this.userInfo)) : {}
				if (this.editItem.fieId) {
					info[this.editItem.fieId] = parseTime(e.value, '{y}-{m}-{d}')
				}
				this.$store.dispatch('user/setUserInfo', info)
				this.dateTimeshow = false
			},
			editInfo(item) {
				this.modelTitle = `修改${item.title}`
				this.inputValue = ''
				this.modelShow = true
			},
			confirmEdit(field) {
				let info = this.userInfo ? JSON.parse(JSON.stringify(this.userInfo)) : {}
				info.nickname = this.inputValue
				this.$store.dispatch('user/setUserInfo', info)
				this.modelShow = false
				this.loadData()
			},
			// 退出登录
			logout() {
				this.$store.dispatch('user/logout')
			},
		}
	}
</script>
<style lang="scss">
	.user-info-content {
		padding: 0px 15px;
		height: 100%;

		.bottom-btn {
			bottom: 30px
		}

		.user-card {
			background: #1B1B1B;

			.info-item {

				margin: 0px 12px
			}
		}
	}
</style>